<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="../bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../zTree_v3/css/demo.css" type="text/css">
    <link rel="stylesheet" href="../zTree_v3/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <style>
        body {
            margin: 0;
            padding: 0;
            text-align: center;
            background-image: url("../image/水漫漫.jpg");
            background-repeat: no-repeat;
            background-size: 100%;
            font-size: 25px;
            color: white;
        }
        div, p, table, th, td {
            list-style: none;
            margin: 0;
            padding: 0;
            color: white;
            font-size: 18px;
            font-family:STXingkai;
        }
    </style>
</head>
<body>
    <div id="jobTable">
        <h1>职位权限管理页面</h1>
        <button id="insertJob" @click="insertJob()">添加职位</button>
        <table id="" class="table table-hover">
            <thead>
            <tr>
                <th>id</th>
                <th>职位名称</th>
                <th>菜单权限</th>
                <th>删除职位</th>
            </tr>
            </thead>
            <tbody>
            <tr v-for="job in list">
                <td v-text="job.jobId"></td>
                <td v-text="job.jobTitle"></td>
                <td><button @click="updPermissions(job)" data-toggle="modal" data-target="#myModal" class="btn btn-danger modify">修改权限</button></td>
                <td><button @click="delJob(job)" class="btn btn-danger ">删除职位</button></td>
            </tr>
            </tbody>
            <!-- 模态框（Modal） -->
            <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
                <div class="modal-dialog"  >
                    <div class="modal-content" id="myModal-smile" style=" height: 560px;margin: 0">
                        <div class="modal-body" >
                            <div class="content_wrap" style="width: 300px">
                                <div class="zTreeDemoBackground left">
                                    <input id="jobId" type="hidden">
                                    <h1 id="jobTitle"></h1>
                                    <ul id="treeDemo" class="ztree"></ul>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button @click="submitUpd" type="button" id="refresh" class="btn btn-default" data-dismiss="modal">提交并关闭</button>
                        </div>
                    </div>
                </div>
            </div>
        </table>
    </div>
    <script type="text/javascript" src="../css/jquery-3.4.1.js"></script>
    <script src="../bootstrap/js/bootstrap.js" ></script>
    <script src="../vue/vue.js" charset="utf-8"></script>
    <script type="text/javascript" src="../zTree_v3/js/jquery.ztree.all.js"></script>
    <script>
            let zNodes;
            let jobVueTable = new Vue({
                el:"#jobTable",
                data:{
                    list:[]
                },
                mounted:function(){
                    this.selJob();
                    //mounted中的方法为预加载方法
                    //需要执行的方法可以在mounted中进行触发，其获取的数据可以赋到data中后，可以放在前面进行渲染
                },
                methods:{
                    selJob:function () {
                        $.ajax({
                            type:"post",
                            dataType:"json",
                            url:"../JobController/selJob",
                            data:"",
                            success:function (data) {
                                jobVueTable.list = data.list;
                            }
                        })
                    },
                    insertJob:function () {
                        window.location.href="insertJob.html";
                    },
                    delJob:function (job) {
                        let jobId = job.jobId;
                        if(jobId ==1){
                            alert("超级管理员不允许被删除！");
                        }else{
                            $.ajax({
                                url: "../JobController/delJobById",
                                type: "post",
                                data: {"jobId":jobId},
                                dataType: "json",
                                success: function (data) {
                                    alert(data.msg);
                                    window.location.reload();
                                }
                            })
                        }

                    },
                    //修改权限方法
                    updPermissions:function (job) {
                        $("#jobId").val(job.jobId);
                        $("#jobTitle").text(job.jobTitle);
                        let jobId = job.jobId;
                        $.ajax({
                            url: "../MenuController/selMenuByJobId",
                            type: "post",
                            data: {"jobId":jobId},
                            dataType: "json",
                            success: function (data) {
                                zNodes = data.list;   //将请求返回的数据存起来
                                $.fn.zTree.init($("#treeDemo"), setting, zNodes);
                            }
                        })
                    },
                    submitUpd:function () {
                        //获取树对象
                        let treeObj = $.fn.zTree.getZTreeObj("treeDemo");
                        //获取状态改变的节点
                        var changedNodes = treeObj.getChangeCheckedNodes();
                        //如果有状态改变的节点
                        console.log(changedNodes.length);
                        if (changedNodes.length !=0){
                            let jobId = $("#jobId").val();
                            //获取被选中的节点
                            let treeNodes = treeObj.getCheckedNodes(true);
                            //调用修改方法
                            $.ajax({
                                url: "../MenuController/updMenu",
                                type: "post",
                                data:{"treeNodes":JSON.stringify(treeNodes),"jobId":jobId},//传送参数时将数组转换为json数组形式
                                async: false,
                                dataType: "json",
                                success: function (data) {
                                    if (data.msg=="修改成功！"){
                                        alert(data.msg);
                                        window.location.reload();
                                    }else{
                                        alert("修改失败，请重新修改！");
                                    }
                                }
                            })
                        }
                    }
                }
            })







            function zTreeOnClick(event, treeId, treeNode) {
                console.log(treeNode);
                console.log(treeNode.menuId);
                console.log(treeNode.menuPid);
                console.log(treeNode.menuName);
            };

            var setting = {
                check: {
                    enable: true
                },
                data:{
                    key: {
                        name: "menuName",
                        title:"menuName"
                    },
                    simpleData: {
                        enable: true,
                        idKey: "menuId",
                        pIdKey: "menuPid",
                        rootPId: 0
                    }
                },
                callback: {
                    onClick: zTreeOnClick
                }
            };

    </script>
</body>
</html>